<template>
    <div @mousewheel="scrolling">
        <Header/>
        <!-- 搜索框-->
        <div class="search" :class="isFixed?'search-fix':''">
            <div class="search-fixed-top" id="fixedBox">
                <div class="search-panel">
                    <font-awesome-icon :icon="['fa', 'search']" style="color: rgb(159,159,159);flex:1;" />
                    <input v-model="queryForm.businessName" type="search" placeholder="请输入要搜索的商品" style="flex: 6; outline: none;border: none;color: #9F9F9F;font-size: 4vw">
                    <div class="search-button" @click="searchBusinessByKw()" style="flex: 1.5;">搜索</div>
                </div>
            </div>
        </div>
        <!-- 点餐分类部分 -->
        <div class="foodType">
            <template v-for="(item,index) in orderTypeList">
                <div class="foodTypeItem" @click="navigatorToBusinessList(item.id)">
                    <img :src="`${item.image}`">
                    <p>{{item.label}}</p>
                </div>
            </template>
        </div>
        <div class="banner">
            <h3>品质套餐</h3>
            <p>搭配齐全吃得好</p>
            <a>立即抢购 &gt;</a>
        </div>
        <!-- 超级会员部分 -->
        <div class="supermember">
            <div class="left">
                <img src="../assets/img/super_member.png" alt="">
                <h3>超级会员</h3>
                <p>&#8226; 每月享超值权益</p>
            </div>
            <div class="right">
                立即开通 &gt;
            </div>
        </div>
        <!-- 推荐商家部分 -->
        <div class="recommend">
            <div class="recommend-line"></div>
            <p>推荐商家</p>
            <div class="recommend-line"></div>
        </div>
        <!-- 推荐方式部分 -->
        <div class="recommendtype">
            <div>
                综合排序
                <font-awesome-icon :icon="['fas', 'caret-down']" style="color: #394760;" />
            </div>
            <div>距离最近</div>
            <div>销量最高</div>
            <div>
                筛选
                <font-awesome-icon :icon="['fas', 'filter']" style="color: #394760;" />
            </div>
        </div>
        <!-- 推荐商家列表部分 -->
        <ul class="business">
            <template v-for="(item) in businessList" :key="item.id">
                <li @click="navigatorToBusinessInfo(item.id)">
                    <img :src="item.businessImg">
                    <div class="business-info">
                        <div class="business-info-h">
                            <h3>{{item.businessName}}</h3>
                            <div class="business-info-like">&#8226;</div>
                        </div>
                        <div class="business-info-star">
                            <div class="business-info-star-left">
                                <font-awesome-icon class="star" :icon="['fas', 'star']"  />
                                <font-awesome-icon class="star" :icon="['fas', 'star']" />
                                <font-awesome-icon class="star" :icon="['fas', 'star']"  />
                                <font-awesome-icon class="star" :icon="['fas', 'star']" />
                                <font-awesome-icon class="star" :icon="['fas', 'star']" />
                                <p>4.9 月售345单</p>
                            </div>
                            <div class="business-info-star-right">
                                蜂鸟专送
                            </div>
                        </div>
                        <div class="business-info-delivery">
                            <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
                            <p>3.22km | 30分钟</p>
                        </div>
                        <div class="business-info-explain">
                            <div>{{item.businessExplain}}</div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon">新</div>
                                <p>饿了么新用户首单立减9元</p>
                            </div>
                            <div class="business-info-promotion-right">
                                <p>2个活动</p>
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                        <div class="business-info-promotion">
                            <div class="business-info-promotion-left">
                                <div class="business-info-promotion-left-incon"
                                     style="background-color: #F1884F;">特</div>
                                <p>特价商品5元起</p>
                            </div>
                        </div>
                    </div>
                </li>
            </template>
        </ul>
        <Footer/>
    </div>

</template>

<script setup lang="ts">
import Footer from "../components/Footer.vue";
import Header from "../components/Header.vue";
import { onMounted, onUnmounted, reactive,watch,ref } from 'vue'
import {TypeVO} from "../type/type";
import {getTypeAPI} from "../service/type.ts";
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import {BusinessQueryDTO, BusinessVO} from "../type/business";
import {getRecommendBusinessAPI} from "../service/business.ts";
import router from "../router";
//点餐类型
const orderTypeList = ref<TypeVO[]>([]);
const isFixed = ref(false)
const data=reactive({
    oldScrollTop:0,
});
const queryForm = ref<BusinessQueryDTO>({
    businessAddress:"",
    businessName:""
})
//商家列表
const businessList = ref<BusinessVO[]>([]);

onMounted(async ()=>{
    //添加滑轮滚动事件
    window.addEventListener("scroll", scrolling);
    const res_1 = await getTypeAPI();
    orderTypeList.value = res_1.data;

    //获取商家列表
    const res_2 = await getRecommendBusinessAPI(queryForm.value);
    businessList.value = res_2.data;
})
onUnmounted(()=>{
    window.removeEventListener("scroll", scrolling);
})

const scrolling=()=>{
    // 滚动条距文档顶部的距离
    let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
    // 滚动条滚动的距离
    let scrollStep = scrollTop - data.oldScrollTop;
    isFixed.value = scrollStep >= 80
};

const searchBusinessByKw=async ()=>{
    const res = await getRecommendBusinessAPI(queryForm.value);
    businessList.value = res.data;
}

//跳转商家列表
const navigatorToBusinessList = (id:number)=>{
    router.push({path:`/businessType/${id}`})
}
//跳转店铺
const navigatorToBusinessInfo = (id:number)=>{
    router.push({path:`/businessInfo/${id}`})
}
</script>




<style scoped>
.search-fix{
    position: fixed;
    background-color: white;
    top: 0
}
.search{
    width: 100%;
    height: 13vw;
}
.search .search-fixed-top{
    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5vw;
    text-align: center;
}
.search .search-fixed-top .search-panel{
    width: 95%;
    display: flex;
    height: 8vw;
    justify-content: center;
    align-items: center;
    border: 2px solid #17BAF9;
    border-radius:25px ;
    font-size: 5vw;
    color: #9F9F9F;
}
.search .search-fixed-top .search-panel .search-button{
    height: 8vw;
    font-size: 5vw;
    border-radius: 25px;
    background-color: #17BAF9;
    color: white;
}
/****************** 点餐分类部分 ******************/
.foodType{
    width: 100%;
    height: 48vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
    align-content: center;
}
.foodType .foodTypeItem{
    display: flex;
    flex-direction: column;

    height: 20vw;
    width: 18vw;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.foodType .foodTypeItem img{
    width: 12vw;
    /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
    height: 10.3vw;
}
.foodType .foodTypeItem p{
    font-size: 3.2vw;
    color: #666;
}
.banner{
    width: 95%;
    /*margin: 0 auto;*/
    height: 29vw;
    margin-left: 2.5vw;
    /*此三个样式组合，可以保证背景图片充满整个容器*/
    background-image: url(../assets/img/index_banner.png);  /*一定要用相对路径，不然上传当网站上回出错*/
    background-repeat: no-repeat;                   /*不要重复*/
    background-size: cover;

    box-sizing: border-box;
    padding: 2vw 6vw;
}
.banner h3{
    font-size: 4.2vw;
    margin-bottom: 1.2vw;
    text-align: left;
}
.banner p{
    font-size: 3.4vw;
    color: #666;
    margin-bottom: 2.4vw;
    text-align: left;
}
.banner a{
    font-size: 3vw;
    color: #C79060;
    font-weight: 700;
    float: left;
}
/****************** 超级会员部分 ******************/
.supermember{
    /*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
    width: 95%;
    margin: 0 auto;
    height: 11.5vw;
    background-color: #FEEDC1;
    margin-top: 1.3vw;
    border-radius: 2px;
    color: #644F1B;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.supermember .left{
    display: flex;
    align-items: center;
    margin-left: 4vw;
    user-select: none;
}
.supermember .left img{
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
}
.supermember .left h3{
    font-size: 4vw;
    margin-right: 2vw;
}
.supermember .left p{
    font-size: 3vw;
}
.supermember .right{
    font-size: 3vw;
    margin-right: 4vw;
    cursor: pointer;
}
.star{
    color: #FEC80E;
    margin-right: 0.5vw;
}
/****************** 推荐商家部分 ******************/
.recommend{

    width: 100%;
    height: 14vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.recommend .recommend-line{
    width: 6vw;
    height: 0.2vw;
    background-color: #888;
}
.recommend p{
    font-size: 4vw;
    margin: 0 4vw;
}
/****************** 推荐方式部分 ******************/
.recommendtype{
    width: 100%;
    height: 5vw;
    margin-bottom: 5vw;

    display: flex;
    justify-content: space-around;
    align-items: center;
}
.recommendtype li{
    font-size: 3.5vw;
    color: #555;
}
.business{
    width: 100%;
    margin-bottom: 14vw;
    padding-left: 0;
}
.business li{
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;
    border-bottom: solid 1px #DDD;

    display: flex;
}
.business li img{
    width: 18vw;
    height: 18vw;
}
.business li .business-info{
    width: 100%;
    box-sizing: border-box;
    padding-left: 3vw;
}
.business li .business-info .business-info-h{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}
.business li .business-info .business-info-h h3{
    font-size: 4vw;
    color: #333;
}
.business li .business-info .business-info-h .business-info-like{
    width: 1.6vw;
    height: 3.4vw;
    background-color: #666;
    color: #fff;
    font-size: 4vw;
    margin-right: 4vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.business li .business-info .business-info-star{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
    font-size: 3.1vw;
}
.business li .business-info .business-info-star .business-info-star-left{
    display: flex;
    align-items: center;
}

.business li .business-info .business-info-star .business-info-star-left p{
    color: #666;
    margin-left: 1vw;
}
.business li .business-info .business-info-star .business-info-star-right{
    background-color: #0097FF;
    color: #fff;
    font-size: 2.4vw;
    border-radius: 2px;
    padding: 0 0.6vw;
}
.business li .business-info .business-info-delivery{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;

    color: #666;
    font-size: 3.1vw;
}
.business li .business-info .business-info-explain{
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
}
.business li .business-info .business-info-explain div{
    border: solid 1px #DDD;
    font-size: 2.8vw;
    color: #666;
    border-radius: 3px;
    padding: 0 0.1vw ;
}
.business li .business-info .business-info-promotion{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.8vw;
}
.business li .business-info .business-info-promotion .business-info-promotion-left{
    display: flex;
    align-items: center;
}
.business-info-promotion-left-incon{
    width: 4vw;
    height: 4vw;
    background-color: #70BC46;
    border-radius: 3px;
    font-size: 3vw;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;
}
.business li .business-info .business-info-promotion .business-info-promotion-left p{
    color: #666;
    font-size: 3vw;
    margin-left: 2vw;
}
.business li .business-info .business-info-promotion .business-info-promotion-right{
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    color: #999;
}
.business li .business-info .business-info-promotion .business-info-promotion-right p{
    margin-right: 2vw;
}
</style>
